<template>
  <el-menu width="400px" default-active="1-4-1" class="teacher-menu el-menu-vertical">
    <router-link v-for="(item, index) in this.menuList" :key="item.name" tag="div" :to="item.path">
      <el-menu-item @click="changePath(item.name)" :ref="item.name" :index="index.toString()">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
        <el-badge v-show="item.tip" :value="item.tip" class="tip"></el-badge>
      </el-menu-item>
    </router-link>
  </el-menu>
</template>

<script>
import { Menu, MenuItem, Badge } from "element-ui";
export default {
  components: {
    ElMenu: Menu,
    ElMenuItem: MenuItem,
    ElBadge: Badge
  },
  data() {
    return {
      path: this.$router.currentRoute.path.split("/")[2],
      menuList: [
        {
          path: "/teacher_center/info",
          title: "个人信息",
          name: "info",
          icon: "el-icon-user"
        },
        {
          path: "/teacher_center/release",
          title: "发布课程",
          name: "release",
          icon: "el-icon-upload"
        },
        {
          path: "/teacher_center/management",
          title: "管理课程",
          name: "management",
          icon: "el-icon-menu"
        },
        {
          path: "/teacher_center/income",
          title: "我的收入",
          name: "income",
          tip: 12,
          icon: "el-icon-sell"
        },
        {
          path: "/teacher_center/questions",
          title: "留言问答",
          name: "questions",
          tip: 11,
          icon: "el-icon-chat-dot-round"
        },
        {
          path: "/teacher_center/message",
          title: "我的消息",
          name: "message",
          tip: 11,
          icon: "el-icon-message"
        }
      ]
    };
  },
  computed: {
    changedPath() {
      return this.$router.currentRoute.path.split("/")[2];
    }
  },
  methods: {
    changePath(name) {
      for (let item in this.$refs) {
        this.$refs[item][0].$el.classList.remove("is-active");
      }
      this.$refs[name][0].$el.classList.add("is-active");
      this.$store.dispatch("teacher/changeInCenterPath", {
        pathName: name
      });
    }
  },
  watch: {
    $route(to) {
      this.changePath(to.path.split('/')[2])
    }
  },
  mounted() {
    this.$store.dispatch("teacher/changeInCenterPath", {
      pathName: this.path
    });
    this.$refs[this.path][0].$el.classList.add("is-active");
  }
};
</script>

<style lang="scss" scoped>
.teacher-menu {
  border-radius: 5px;
  overflow: scroll;
  border: none;
  padding-top: 40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  height: 80%;
  .el-menu-item {
    text-align: left;
    margin: 7px auto;
    position: relative;
    border-radius: 10px;
    width: 90%;
    font-size: 15px;
    letter-spacing: 1px;
    transition: all 0.3s;
    &.is-active {
      background-color: rgba(179, 233, 114, 0.829);
      color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }
    .tip {
      right: 20%;
      position: absolute;
    }
  }
}
</style>
